﻿@page
@{ Layout = "_Layout"; }
@section Styles{
    <link href="/sitefiles/assets/lib/geeks/css/bootstrap-icons.css" rel="stylesheet" type="text/css" />
    <link href="/sitefiles/assets/lib/geeks/css/theme.min.css" rel="stylesheet" type="text/css" />
}

<div class="px-3">
    <el-collapse v-model="activeNames">
        <el-collapse-item :name="item.guid" :title="item.mark" v-for="item in list">
            <template slot="title">
                <i class="bi bi-trophy-fill me-2 text-warning"></i>{{ item.mark }}
            </template>
            <el-card>
                <div slot="header">
                    <div align="center">
                        <p>（{{item.mark}}）</p>
                        <el-link type="primary" icon="el-icon-date" v-on:click="btnEditClick(item.id)">{{ item.pkBeginDateTimeStr }}-{{ item.pkEndDateTimeStr }}</el-link>
                    </div>
                </div>
                <div>
                    <el-row :gutter="20" v-if="item.vs===2 || item.vs===3">
                        <el-col :span="24" v-for="room in item.roomList" align="center">
                            <el-card class="w-50 rounded-pill">
                                <div class="d-flex justify-content-between align-items-center">
                                    <div v-if="room.userId_A>0" class="position-relative">
                                        <span class="avatar avatar-lg ">
                                            <img :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                        </span>
                                        <span>
                                            {{ room.userA.displayName }}
                                        </span>
                                        <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                            <span v-if="room.winUserId==room.userId_A" class="text-success">胜</span>
                                            <span v-else class="text-danger">负</span>
                                        </span>
                                    </div>
                                    <div v-else>
                                        <span class="avatar avatar-lg">
                                            <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                                        </span>
                                    </div>
                                    <div>
                                        <i class="bi bi-trophy-fill display-1 text-warning py-2 px-4" v-if="item.vs===2"></i>
                                        <i class="bi bi-trophy display-1" v-else></i>
                                    </div>
                                    <div v-if="room.userId_B>0" class="position-relative">
                                        <span>
                                            {{ room.userB.displayName }}
                                        </span>
                                        <span class="avatar avatar-lg">
                                            <img :src="room.userB.avatarUrl || DEFAULT_AVATAR_URL" class="rounded-circle">
                                        </span>
                                        <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                            <span v-if="room.winUserId==room.userId_B" class="text-success">胜</span>
                                            <span v-else class="text-danger">负</span>
                                        </span>
                                    </div>
                                    <div v-else>
                                        <span class="avatar avatar-lg">
                                            <img :src="DEFAULT_NOBODY_AVATAR_URL" class="rounded-circle">
                                        </span>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" v-else-if="item.vs===4">
                        <el-col :span="12" v-for="room in item.roomList" align="center">
                            <el-card>
                                <el-row :gutter="20">
                                    <el-col :span="10">
                                        <div v-if="room.userId_A>0" class="position-relative">
                                            <el-avatar :src="DEFAULT_AVATAR_URL"></el-avatar>
                                            <div>
                                                {{ room.userA.displayName }}
                                            </div>
                                            <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                <span v-if="room.winUserId==room.userId_A" class="text-success">胜</span>
                                                <span v-else class="text-danger">负</span>
                                            </span>
                                        </div>
                                        <div v-else>
                                            <el-avatar :src="DEFAULT_NOBODY_AVATAR_URL"></el-avatar>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">vs</el-col>
                                    <el-col :span="10">
                                        <div v-if="room.userId_B>0" class="position-relative">
                                            <el-avatar :src="DEFAULT_AVATAR_URL"></el-avatar>
                                            <div>
                                                {{ room.userB.displayName }}
                                            </div>
                                            <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                <span v-if="room.winUserId==room.userId_B" class="text-success">胜</span>
                                                <span v-else class="text-danger">负</span>
                                            </span>
                                        </div>
                                        <div v-else>
                                            <el-avatar :src="DEFAULT_NOBODY_AVATAR_URL"></el-avatar>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" v-else>
                        <el-col :span="6" v-for="room in item.roomList" align="center">
                            <el-card style="margin-top:18px;">
                                <el-row :gutter="20">
                                    <el-col :span="10">
                                        <div v-if="room.userId_A>0" class="position-relative">
                                            <el-avatar :src="room.userA.avatarUrl || DEFAULT_AVATAR_URL"></el-avatar>
                                            <div>
                                                {{ room.userA.displayName }}
                                            </div>
                                            <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                <span v-if="room.winUserId==room.userId_A" class="text-success">胜</span>
                                                <span v-else class="text-danger">负</span>
                                            </span>
                                        </div>
                                        <div v-else>
                                            <el-avatar :src="DEFAULT_NOBODY_AVATAR_URL"></el-avatar>
                                        </div>
                                    </el-col>
                                    <el-col :span="4">vs</el-col>
                                    <el-col :span="10">
                                        <div v-if="room.userId_B>0" class="position-relative">
                                            <el-avatar :src="DEFAULT_AVATAR_URL"></el-avatar>
                                            <div>
                                                {{ room.userB.displayName }}
                                            </div>
                                            <span v-if="room.finished" class="position-absolute top-0 start-50 translate-middle">
                                                <span v-if="room.winUserId==room.userId_B" class="text-success">胜</span>
                                                <span v-else class="text-danger">负</span>
                                            </span>
                                        </div>
                                        <div v-else>
                                            <el-avatar :src="DEFAULT_NOBODY_AVATAR_URL"></el-avatar>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-collapse-item>
    </el-collapse>
</div>
@section Scripts{
    <script src="/sitefiles/assets/js/admin/exam/examPkRooms.js" type="text/javascript"></script>
}